<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>开放40年，从黑白到斑斓</title>
		<link rel="icon" href="img/片1.ico" type="images/x-ico" />
	</head>
	<style>
		*{margin: 0;
		  padding: 0;}
	
		.qdiv{
			background-color: yellow;
			border-width: 5px 21px 46px 78px;
			border-color: black;
			border-style:solid ;
			width: 350px;
			height: 260px;
			padding-left: 39px;
			padding-top: 66px;
			align-self: center;
			margin: 0 auto;
				box-shadow:5px 5px 15px #333; 
		}
		.qqdiv{
			background-color: deepskyblue;
			border-width: 36px 23px 11px 2px;
			border-color: black;
			border-style:solid ;
			width: 100px;
			height: 66px;
			padding-left: 20px;
			padding-top: 33px;
			align-self: center;
			margin:90px 139px;
		}
			.qqqdiv{
			background-color: deepskyblue;
			border-width: 36px ;
			border-color: black;
			border-style:solid ;
			width: 100px;
			height: 66px;
			padding-left: 20px;
			padding-top: 33px;
			align-self: center;
			margin:150px 0 0 666px;
			display: inline-block;
		}
			.qqqqdiv{
			background-color: deepskyblue;
			border-width: 36px 23px 11px 2px;
			border-color: black;
			border-style:solid ;
			width: 100px;
			height: 66px;
			padding-left: 20px;
			padding-top: 33px;
			align-self: center;
			margin:0px 0 100px 139px;
		}
			.adiv{
			background-color: deepskyblue;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: ;
			width: 1504px;
			height:1645px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 0 auto;
		}
		.a1div{
			background-color: deepskyblue;
			border-width: 2px 0px 2px 2px;
			border-color: black;
			border-style: solid ;
			width: 640px;
			height:200px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 0 860px;
			float: left;
			box-shadow:-5px 5px 5px #333; 
		
		}
			.a2div{
			background-color: deepskyblue;
			border-width: 2px 2px 2px 0px;
			border-color: black;
			border-style: solid ;
			width: 950px;
			height:1400px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 40px 0;
			float: left;
			box-shadow:5px 5px 5px #333; 
		}
			.a3div{
			background-color: deepskyblue;
			border-width: 3px 2px 1px 0px;
			border-color: black;
			border-style:dotted ;
			width: 800px;
			height:200px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 60px 110px;
			float: left;
		}
			.a4div{
			background-color: deepskyblue;
			border-width: 2px 0px 2px 5px;
			border-color: black;
			border-style: solid ;
			width:400px;
			height:1300px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin:60px 60px;
			float: left;
			
		}
			.a5div{
			background-color: deepskyblue;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: solid ;
			width: 200px;
			height:250px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 40px 20px;
		}
		.a6div{
			background-color: deepskyblue;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style: solid ;
			width: 200px;
			height:250px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 10px 20px;
		}
		.wdiv{
			background-color: deepskyblue;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style:solid ;
			width: 1000px;
			height:320px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 0 500px;
			
		}
		.w1div{
			background-color: deepskyblue;
			border-width: 2px 2px 2px 2px;
			border-color: black;
			border-style:solid ;
			width: 200px;
			height:260px;
			padding-left: 0;
			padding-top: 0;
			align-self: center;
			margin: 30PX 0;
		
		}
		.ddiv{
			background-color: ;
			border-width: ;
			border-color:;
			border-style: ;
			width: 100px;
			height: 10px;
			padding-left: 20px;
			padding-top: 33px;
			align-self: center;
			margin:0px 500px;
			display: inline-block;
		}
		/*body {text-align: center;}*/
		img:hover{
				transform: scale(1.4);
				cursor: pointer;
				transition: all 0.6s;
			}

		 #grad1 {
    height: 100%;
    width: 100%;
    background-color: ; /* 不支持线性的时候显示 */
    background-image: linear-gradient(to bottom right,dodgerblue,aqua,aquamarine);
}

		>
		
		.wrapper{
			position: absolute;
			float: left;
			margin: 140px 100px;
		}

		.line{
			position:relative;
			top: 0px;
			width: 2px;
			height: 8px;
			background-color: red;
		}

		.circle{
			position: absolute;
			display: block;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			background-color: blue;
		}
		.circle-top{
			top: 0px;
			left: -3.5px;
		}
		.circle-bottom{
			bottom: 0px;
			left: -3.5px;
		}

		.dot{
			position: absolute;
			display: block;
			width: 4px;
			height: 4px;
			border-radius: 50%;
			left: -1.5px;
		}

		.line1{
			margin-left: 0px;
			background-color: #2410CB;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}
		.line1 > span{
			background-color: #D4141E;
		}
		.line1 > .dotted > .dot{
			background-color: #D4141E;
		}
		.line1 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}
		.line1 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}
		.line1 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}
		.line1 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) infinite;
		}

		.line2{
			margin-left: 35px;
			background-color: #852DF4;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}
		.line2 > span{
			background-color: #FC7E48;
		}
		.line2 > .dotted > .dot{
			background-color: #FC7E48;
		}
		.line2 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}
		.line2 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}
		.line2 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}
		.line2 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .05s infinite;
		}

		.line3{
			margin-left: 70px;
			background-color: #F42DF1;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
		}
		.line3 > span{
			background-color: #EDEB29;
		}
		.line3 > .dotted > .dot{
			background-color: #EDEB29;
		}
		.line3 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
		}
		.line3 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
		}
		.line3 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
		}
		.line3 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .1s infinite;
		}

		.line4{
			margin-left: 105px;
			background-color: #F91396;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
		}
		.line4 > span{
			background-color: #ACED29;
		}
		.line4 > .dotted > .dot{
			background-color: #ACED29;
		}
		.line4 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
		}
		.line4 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
		}
		.line4 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
		}
		.line4 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .15s infinite;
		}

		.line5{
			margin-left: 140px;
			background-color: #D4141E;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
		}
		.line5 > span{
			background-color: #4EF02B;
		}
		.line5 > .dotted > .dot{
			background-color: #4EF02B;
		}
		.line5 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
		}
		.line5 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
		}
		.line5 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
		}
		.line5 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .2s infinite;
		}

		.line6{
			margin-left: 175px;
			background-color: #FC7E48;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
		}
		.line6 > span{
			background-color: #38E790;
		}
		.line6 > .dotted > .dot{
			background-color: #38E790;
		}
		.line6 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
		}
		.line6 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
		}
		.line6 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
		}
		.line6 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .25s infinite;
		}

		.line7{
			margin-left: 210px;
			background-color: #EDEB29;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
		}
		.line7 > span{
			background-color: #25EACC;
		}
		.line7 > .dotted > .dot{
			background-color: #25EACC;
		}
		.line7 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
		}
		.line7 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
		}
		.line7 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
		}
		.line7 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .3s infinite;
		}

		.line8{
			margin-left: 245px;
			background-color: #ACED29;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
		}
		.line8 > span{
			background-color: #309CDF;
		}
		.line8 > .dotted > .dot{
			background-color: #309CDF;
		}
		.line8 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
		}
		.line8 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
		}
		.line8 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
		}
		.line8 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .35s infinite;
		}

		.line9{
			margin-left: 280px;
			background-color: #4EF02B;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
		}
		.line9 > span{
			background-color: #2544E7;
		}
		.line9 > .dotted > .dot{
			background-color: #2544E7;
		}
		.line9 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
		}
		.line9 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
		}
		.line9 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
		}
		.line9 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .4s infinite;
		}

		.line10{
			margin-left: 315px;
			background-color: #38E790;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
		}
		.line10 > span{
			background-color: #852DF4;
		}
		.line10 > .dotted > .dot{
			background-color: #852DF4;
		}
		.line10 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
		}
		.line10 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
		}
		.line10 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
		}
		.line10 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .45s infinite;
		}

		.line11{
			margin-left: 350px;
			background-color: #25EACC;
			-webkit-animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
			animation: line 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
		}
		.line11 > span{
			background-color: #F42DF1;
		}
		.line11 > .dotted > .dot{
			background-color: #F42DF1;
		}
		.line11 > .dotted > .dot-top{
			top: 0px;
			-webkit-animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
			animation: dot-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;

		}
		.line11 > .dotted > .dot-bottom{
			bottom: 0px;
			-webkit-animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
			animation: dot-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
		}
		.line11 > .dotted > .dot-middle-top{
			top: 0px;
			-webkit-animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
			animation: dot-middle-top 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
		}
		.line11 > .dotted > .dot-middle-bottom{
			bottom: 0px;
			-webkit-animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
			animation: dot-middle-bottom 2s cubic-bezier(0.250, 0, 0.705, 1) .5s infinite;
		}

		@-webkit-keyframes line{
			0%{height: 4px; top: 0px; left: 0px; -webkit-transform: rotate(-65deg)}
			10%{height: 220px; top: -110px; left: 15px;}
			45%{height: 200px; top: -100px; left: 25px;}
			70%{height: 8px; top: 0px; left: 25px; -webkit-transform: rotate(0deg);}
			100%{height: 8px; top: 0px; left: 15px; -webkit-transform: rotate(0deg);}
		}
		@-webkit-keyframes dot-top{
			0%{top: -30px}
			10%{top: -30px;}
			45%{top: -25px;}
			60%{top: 0px;}
			100%{top: 0px;}
		}
		@-webkit-keyframes dot-bottom{
			0%{bottom: -30px}
			10%{bottom: -30px;}
			45%{bottom: -25px;}
			60%{bottom: 0px;}
			100%{bottom: 0px;}
		}
		@-webkit-keyframes dot-middle-top{
			0%{}
			10%{}
			45%{top: 98px;}
			70%{top: -50px;}
			85%{top: 0px;}
			100%{top: 0px;}
		}
		@-webkit-keyframes dot-middle-bottom{
			0%{}
			10%{}
			45%{bottom: 98px;}
			70%{bottom: -50px;}
			85%{bottom: 0px;}
			100%{bottom: 0px;}
		}
		
		@keyframes line{
			0%{height: 4px; top: 0px; left: 0px; transform: rotate(-65deg)}
			10%{height: 220px; top: -110px; left: 15px;}
			45%{height: 200px; top: -100px; left: 25px;}
			70%{height: 8px; top: 0px; left: 25px; transform: rotate(0deg);}
			100%{height: 8px; top: 0px; left: 15px; transform: rotate(0deg);}
		}
		@keyframes dot-top{
			0%{top: -30px}
			10%{top: -30px;}
			45%{top: -25px;}
			60%{top: 0px;}
			100%{top: 0px;}
		}
		@keyframes dot-bottom{
			0%{bottom: -30px}
			10%{bottom: -30px;}
			45%{bottom: -25px;}
			60%{bottom: 0px;}
			100%{bottom: 0px;}
		}
		@keyframes dot-middle-top{
			0%{}
			10%{}
			45%{top: 78px;}
			70%{top: -50px;}
			85%{top: 0px;}
			100%{top: 0px;}
		}
		@keyframes dot-middle-bottom{
			0%{}
			10%{}
			45%{bottom: 78px;}
			70%{bottom: -50px;}
			85%{bottom: 0px;}
			100%{bottom: 0px;}
		}
		
	</style>
	<body>
		<div id="grad1">
			
		    <br />
			<br />
			<br />
		<div class="ddiv">
			<div class="wrapper">
			<div class="line line8">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line9">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line10">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
			<div class="line line1">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line2">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line3">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line4">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line5">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line6">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line7">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line8">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line9">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line10">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line11">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line3">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line4">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line5">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		<div class="line line6">
			<span class="circle circle-top"></span>
			<div class="dotted">
				<span class="dot dot-top"></span>
				<span class="dot dot-middle-top"></span>
				<span class="dot dot-middle-bottom"></span>
				<span class="dot dot-bottom"></span>
			</div>
			<span class="circle circle-bottom"></span>
		</div>
		</div>
		</div>
		    <br />
			<br />
			<br />
		<div class="qdiv"><h1>伟大改革开放</h1><div class="qqdiv"><h1>40</h1>周年</div></div>
		
		<div class="qqqdiv">请往下翻</div>
		
		<div class="qqqqdiv"></div>
		
		<div class="adiv">
		<div class="a1div" style="text-align: center">
			
			<br />
			<br />
		
			<h1>开放40年
			<br>
			-----服装业的变革</h1>
		</div>
		<div class="a2div">
			<div class="a3div">
			<b>改革开放初期>走出“灰暗”时代</b>

     1978年改革开放后，全社会在高唱解放思想。老百姓服饰的春天开始于1978年改革开放。随着经济的发展，一些西方的服饰随着进入中国的是现场并且形成了一种社会潮流。值得一提的是，现在还有好多人都能映像起喇叭裤，喇叭裤当时风靡中国市场的时候，可真是火了一把，在当时的小青年身上可以说是被体现的淋漓尽致。 上个世纪80年代初，戴蛤蟆镜、穿喇叭裤成为了一种大街小巷的时尚。
随后，像什么“港裤”、“燕尾服”等各种新潮的服装相继涌现，让人们着实潮流了一把。 体形裤也流行了相当一段时间。
			</div>
			<div class="a3div">
			<b>80年代>色彩缤纷的时代</b>
     1980年是中国改革开放的第三个年头。随着时代的发展，人们的穿着越来越丰富，色彩也从单一的蓝色灰色变得五颜六色。

在很多人看来，中国服饰发展的春天与中国人时尚观念的复苏开始于中国推行改革开放政策之后。人们看到大喇叭裤、蝙蝠衫、还有健美裤和连衣裙。

随着中国经济不断对外开放，西方文化和港台时尚迅速进入中国，向年轻一代传递着最新的潮流信息。而这样的变化，直接体现到80年代。

80年代初，封闭的大门被打开，外面的世界使中国人眼花缭乱，别人的生活方式使中国女性开始以审视和怀疑的目光打量自己的穿戴——随着对文革极左思潮清算的深入与扩大，中国人开始认同这样一个真理：美是没有阶级性的，穿衣戴帽不一定与意识形态的健康与否必然相连。
			</div>
			<div class="a3div">
			<b>90年代>追求个性的时代</b>
	90年代，中国服装至少在高端人群中已经实现了与世界的同步。除了对品牌的追崇外，服装的大胆尺度也开始挑战中国人的眼球。

内衣外穿、露脐装、哈韩服等站到了流行前沿。当露脐装、吊带装最早在中国出现时，让很多人的眼光无所适从。

90年代人们的生活向小康过渡，思想观念更为开放。人们的服饰在急速变化，穿衣打扮讲求个性和多变，很难用一种款式或色彩来概括时尚潮流，强调个性、不追逐流行本身也成为一种时尚。

从服装的变化上，我们看出了时代的进步和人们内心观念的转变。服饰的变化是以经济的发展为前提的，同时也反映了人们的思想观念随着时代的变化而变化，从以往的“从众”心理到“追求个性”。


			</div>
			<div class="a3div">
			<b>二十一世纪>走向国际的时代</b>

         在21世纪的最初几年，中国人对服装的主要作用已经不再是御寒，而是一种个性魅力的展现。

同时，随着改革开放的不断深入，在21世纪，世界服装艺术中的中国元素也开始得到越来越广泛的体现。唐装走俏全球、旗袍热遍世界，中国服装作为一种文化潮流和商业主流在全世界受到注目和尊重。

2001年在上海APEC峰会上，20位各国领导人集体亮相，他们穿的都是大红色或宝蓝色的中式对襟唐装，这一情景通过电视瞬间传遍全球，唐装迅速流行。章子怡在柏林电影节领奖台上惊艳亮相的一袭肚兜式晚礼服更是让中式服装跻身世界时尚前列。

这种东方韵味十足的唐装，使穿惯了现代时装的人们产生了亲切感和新鲜感。于是乎，唐装也随着这股热潮走进了寻常百姓家。
			</div>
			
		</div>
		<div class="a4div">
				<div class="a5div">
					    <img src="img/e0bdb15d5b0649e3bb6b7c6f9eff5e2f.png" alt="Pulpit rock"  style="width:200px ;" class="fakeimg"></div>
					<div class="a5div" style="margin: 70px 20px;">
							<img src="img/d746d2794d70419d9b4ac9a9e323fe7e.jpeg" alt="Pulpit rock"  style="width:200px ;" class="fakeimg">
					</div>
					<div class="a5div">
							<img src="img/5dbb9b5a430c4805a82f6f28a867f8ff.jpeg" alt="Pulpit rock"  style="width:200px ;" class="fakeimg">
					</div>
					<div class="a5div" style="margin: 70px 20px;">
							<img src="img/ac4df840c0c64c199c0cdf3c876eb971.jpeg" alt="Pulpit rock"  style="width:200px ;" class="fakeimg">
					</div>
			</div>
		</div>
		<br />
		    <br />
			<br />
			<br />
			<br />
			<div class="wdiv" >
					<img src="img/capture_20201115190004247.png" alt="Pulpit rock"  style="width:650px ;" class="fakeimg">
					
					</div>
		    <br />
			<br />
			<br />
			<br />
				<div class="wdiv" >
					<img src="img/capture_20201115190339428.png" alt="Pulpit rock"  style="width: 1000px ;" class="fakeimg">
					
					</div>
		    <br />
			<br />
			<br />
			 <br />
			 <div class="wdiv" >
					<img src="img/capture_20201115190715759.png" alt="Pulpit rock"  style="height: 320px ;" class="fakeimg">
					
					</div>
			 <div class="w1div" >
			 	&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp今天，服装市场百花齐放，我们有了海量的的服装选择。从服装的变迁上我们看到了改革开放四十年所取得的伟大成就。
			 	真诚祝愿伟大祖国越来越富强！！！
                 <br>
                 （图中出现过的品牌可以给我账上打钱了啊 ⊙▽⊙）
			 </div>
			<br />
			<br />
			<br />
			<br />
		</div>
			
	</body>
</html>
